window.onload = function () {
    let fdj = document.getElementById('fdj')
    let mengban = fdj.getElementsByClassName('mengban')[0]
    let fdjBox = fdj.getElementsByClassName('fdjBox')[0]

    let imgWidth = fdj.getElementsByTagName('img')[0].width;
    fdj.onmousemove = function (event){

        var left = event.clientX - this.offsetLeft - imgWidth / 2 / 2;
        var top = event.clientY - this.offsetTop - imgWidth / 2 / 2;

        if(left < 0){
            left = 0;
        }
        if(left > this.offsetWidth - imgWidth / 2){
            left = this.offsetWidth - imgWidth / 2;
        }
        if(top < 0){
            top = 0;
        }
        if(top > this.offsetHeight - imgWidth / 2){
            top = this.offsetHeight - imgWidth / 2;
        }
        mengban.style.left = left + 'px';
        mengban.style.top = top + 'px';
        mengban.style.display = 'block';
        fdjBox.style.backgroundImage = 'url(img.jpg)';
        fdjBox.style.backgroundSize = '200% 200%';
        fdjBox.style.backgroundRepeat = 'no-repeat';
        fdjBox.style.backgroundPosition = -left * 2 + 'px' + ' ' + -top * 2 + 'px';
        fdjBox.style.display = 'block';
    }
    fdj.onmouseout = function () {
        mengban.style.display = 'none';
        fdjBox.style.display = 'none';
    }
}